<template>
  <div>
    <myheader :backIconShow="true">购物清单</myheader>
    <div class="center">
      <ul>
        <li v-for="(item, index) in cartlist" :key="index" class="lie">
          <input
            type="checkbox"
            value=""
            v-model="item.select"
            @click="push(item)"
          />
          <i><img :src="item.img" alt="" /></i>
          <div class="xiang">
            <p>{{ item.title }}</p>
            <b>￥{{ item.money }}</b>
            <span>库存{{ item.cun }}件</span>
          </div>
          <div class="anniu">
            <button @click="add(item, 'push')">+</button>
            <p>{{ item.num }}</p>
            <button @click="add(item, 'reduce')">-</button>
          </div>
        </li>
      </ul>
    </div>
    <div class="butom">
      <input type="checkbox" name="" id="sss" v-model="select" />
      <label for="sss">全选</label>
      <p>合计：￥{{ shu }}</p>
      <div>去结算{{ jiesuan.length }}</div>
    </div>
  </div>
</template>
<script>
import myheader from "../components/header/index.vue";
export default {
  data() {
    return {
      jiesuan: [],
      shu: 0,
    };
  },
  components: {
    myheader,
  },
  computed: {
    cartlist() {
      return this.$store.state.cartList;
    },
    select: {
      get() {},
      set(value) {
        if (value) {
          this.cartlist.map((item) => (item.select = true));
          this.jiesuan = this.cartlist;
          this.shu = 0;
          this.jiesuan.map(
            (item) => (this.shu = this.shu + item.money * item.num)
          );
        } else {
          this.cartlist.map((item) => (item.select = false));
          this.jiesuan = [];
          this.shu = 0;
        }
      },
    },
  },
  methods: {
    push(value) {
      value.select = !value.select;
      let index = this.jiesuan.findIndex((item) => item.title == value.title);
      if (index == -1) {
        this.jiesuan.push(value);
        this.shu = 0;
        this.jiesuan.map(
          (item) => (this.shu = this.shu + item.money * item.num)
        );
      } else {
        this.jiesuan.splice(index, 1);
        if (this.jiesuan.length == 0) {
          this.shu = 0;
        } else {
          this.shu -= value.num * value.money;
        }
      }
    },
    add(item, type) {
      this.$store.commit("SET_CARTLIST", {
        img: item.img,
        title: item.title,
        money: item.money,
        num: 1,
        cun: 5,
        select: false,
        type,
      });
      if (item.select == true) {
        if (type == "push") {
          this.shu = 0;
          this.jiesuan.map(
            (item) => (this.shu = this.shu + item.money * item.num)
          );
        } else if (type == "reduce") {
          this.shu -= item.money;
        }
      }
    },
  },
  created() {
    this.$store.dispatch("getCartList");
  },
  mounted() {
    this.cartlist.map((item) => {
      item.select = false;
    });
    this.jiesuan.map((item) => (this.shu = this.shu + item.money * item.num));
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.butom {
  width: 100%;
  height: 0.53rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.16rem;
  input {
    width: 0.2rem;
    height: 0.2rem;
    font-size: 0.16rem;
  }
  p {
    font-size: 0.16rem;
  }
  div {
    width: 1.2rem;
    height: 0.52rem;
    background-color: rgb(93, 66, 133);
    color: white;
  }
}
.box {
  width: 100%;
  height: auto;
}

.nav {
  width: 3.75rem;
  height: 0.7rem;
  background-color: rgb(93, 66, 133);
  overflow: hidden;
  overflow-x: scroll;
  margin-top: 0.45rem;
  .nav_show {
    width: 5rem;
    height: auto;
    display: flex;
    color: white;
    align-items: center;
    font-size: 0.16rem;
    justify-content: space-between;
  }
  .nav_list {
    height: 0.7rem;
    line-height: 0.7rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
  .select {
    background-color: rgb(154, 81, 255);
  }
}
.title {
  width: 100%;
  height: 0.4rem;
  font-size: 0.16rem;
  display: flex;

  p {
    width: 30%;
    height: 100%;
    color: black;
    text-align: center;
    line-height: 0.4rem;
  }
}
.center {
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  ul {
    width: 100%;
    height: auto;
    .lie {
      width: 100%;
      height: 0.77rem;
      display: flex;
      background: #fff;
      margin-bottom: 0.2rem;
      input {
        width: 0.2rem;
        height: 0.2rem;
        margin-top: 0.3rem;
      }
      i {
        width: 0.55rem;
        height: 0.55rem;
        img {
          width: 100%;
          height: 100%;
          float: left;
          left: 0;
          top: 0;
        }
      }
      .xiang {
        width: 2.21rem;
        height: 0.77rem;
        display: flex;
        flex-wrap: wrap;
        p {
          width: 2.21rem;
          height: 0.38rem;
          font-size: 0.14rem;
          text-align: left;
        }
        b {
          width: 2.21rem;
          height: 0.14rem;
          font-size: 0.14rem;
          margin-top: 0.1rem;
          text-align: left;
          font-weight: 800;
          color: rgb(93, 66, 133);
        }
        span {
          width: 2.21rem;
          height: 0.16rem;
          font-size: 0.12rem;
          text-align: left;
        }
      }
      .anniu {
        width: 0.55rem;
        height: 0.77rem;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        button {
          width: 0.32rem;
          height: 0.22rem;
        }
        p {
          width: 0.5rem;
          height: 0.3rem;
          font-size: 0.14rem;
        }
      }
    }
  }
}
</style>
